.body--light {
  thead tr {
    background-color: #F5F6F9;
  }

  tbody tr,
  .qx-full-table,
  .q-table--grid.fullscreen {
    background-color: #FFF;
  }

  tbody > .q-tr:nth-of-type(even) {
    background-color: #F3F7FD;
  }

  tbody tr {
    color: #666666;
  }

  .q-table__middle {
    border-radius: .25rem;
    border: .1rem solid $separator-color;
  }

  .q-table__top {
    border-bottom-color: transparent;
  }

  .q-table__bottom {
    border-top-color: transparent;
  }
}

.body--dark {
  thead tr {
    background-color: var(--q-dark-page);
  }

  tbody tr {
    background-color: var(--q-dark);
  }

  .qx-full-table {
    background-color: var(--q-dark-page);
  }
}

.dynamic-column-popup {
  width: 12.5rem;
  height: 18.75rem;
}

.q-table--bordered {
  border-top-color: transparent;
}

.qx-table {
  border-radius: .5rem;
  padding: 0 $space-base;
  background-color: rgba(#FFF, .6);
  box-shadow: 0 .125rem .125rem rgba(0, 0, 0, 0.14), 0 .0625rem 0 0 rgba(0, 0, 0, 0.12);

  .q-table__top .q-expansion-item .q-item {
    display: none;
  }

  thead {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  &--selection {
    width: 2.25rem;
    min-width: 2.25rem;
    text-align: center;
    position: sticky;
    top: 0;
    left: 0;
    z-index: inherit;
    background-color: inherit;

    &-td {
      width: inherit;
      position: sticky !important;
      left: 0;
      z-index: 1;
      background-color: inherit;
    }
  }

  &--index {
    position: sticky;
    top: 0;
    left: 0;
    background: inherit;

    &-td {
      position: sticky !important;
      left: 0;
      z-index: 1;
      background-color: inherit;
    }
  }

  &--menu {
    position: sticky;
    top: 0;
    right: 0;
    z-index: inherit;
    background: inherit;

    &-td {
      position: sticky !important;
      right: 0;
      z-index: 1;
      background-color: inherit;
    }
  }

  &-bottom {
    width: 100%;

    .selected-tips {
      > .q-btn {
        position: relative;
        top: -.04rem;
        margin-left: .3125rem;
      }
    }

    .q-field {
      min-width: 6.25rem;
      max-width: 8.5rem;
    }

    .q-field__control {
      height: 2rem;
    }

    .q-field--dense .q-field__control,
    .q-field--dense .q-field__marginal {
      height: 2rem;
    }

    .q-field--auto-height.q-field--dense .q-field__control,
    .q-field--auto-height.q-field--dense .q-field__native {
      min-height: 2rem;
    }
  }

  .q-inner-loading {
    z-index: 10;
  }

  .q-table__middle, .q-table__grid-content {
    height: auto;
    overflow: auto;
    flex-grow: inherit;
  }

  .expand-btn {
    top: 50%;
    left: .1rem;
    transform: translateY(-50%);
  }

  th, td,
  .q-item__label--caption {
    white-space: pre-line;
  }
}

.q-table-mt-md .q-table__middle {
  margin-top: $space-base;
}

.q-table--grid.q-table-mt-md .q-table__middle {
  border: none;
}

.q-table-mt-sm {
  .q-table__middle, .q-table__grid-content {
    margin-top: $space-base * 0.5;
  }
}

.table-header-inherit {
  text-transform: inherit;
}

.table-menu .q-btn {
  min-height: 1em;
  line-height: 1.2;
}

[class*="qx-fixed-column-"] {
  position: sticky !important;
  z-index: 1;
  background-color: inherit;
}

.q-table--dense .q-table__top {
  padding: $space-base .125rem 0;
}

.q-table--dense .qx-table-bottom {
  min-height: 2.75rem;
}

.q-table__bottom {
  border-top-width: 0;
  min-height: 0 !important;
  padding: $space-base * 0.5 .125rem 0;

  &:has(.qx-table-bottom) {
    min-height: 3.125rem !important;
  }

  .q-btn {
    line-height: 1.2rem;
  }
}

.q-table__top {
  padding: .5rem;

  .q-separator--horizontal {
    width: 100%;
    height: .1rem;
    background-color: transparent;
  }
}

.q-table--dense .q-table th:last-child,
.q-table--dense .q-table td:last-child,
.q-table--dense .q-table th:first-child,
.q-table--dense .q-table td:first-child {
  padding-left: .5rem;
  padding-right: .5rem;
}

.q-table--cell-separator .non-first-row th:first-child {
  border-left: .08rem solid $separator-color;
}

.q-table--grid .q-table__middle {
  margin-bottom: 0;
  border-top-width: 0;
}

.q-table--merge-cell {
  .q-table__middle {
    border-bottom-color: transparent;
  }

  .q-table__bottom {
    position: relative;

    &::before {
      position: absolute;
      content: '';
      z-index: 5;
      top: -2px;
      height: 1px;
      left: .175rem;
      right: .175rem;
      background-color: $separator-color;
    }
  }
}

.pagination-select {
  .q-item, .q-item--dense {
    min-height: 2rem;
  }
}

.q-table__grid-normal {
  top: -$space-base * 0.5;
  left: -$space-base * 0.25;

  .q-card::after {
    position: absolute;
    content: '';
    top: -.75rem;
    left: -.75rem;
    width: 2rem;
    height: 2rem;
    filter: blur(.0625rem);
    background: radial-gradient(ellipse at center, #FFF, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  }

  &:before {
    inset: 0;
    z-index: 0;
    opacity: 0;
    content: '';
    position: absolute;
    top: $space-base * 1;
    left: $space-base * 1;
    transition: opacity .3s ease-in-out;
    border-radius: $generic-border-radius;
    background: linear-gradient(135deg, #3661FC 0%, #5961DF 100%);
  }

  .q-table__grid-header {
    min-height: 2.5rem;
    background: linear-gradient(138deg, #3661FC 0%, #5961DF 100%);

    .q-checkbox--dense .q-checkbox__inner {
      width: 1.5rem;
      height: 1.5rem;
      min-width: 1.5rem;
      aspect-ratio: 1/1;

      .q-checkbox__bg {
        border-radius: 12.5%;
        border-color: rgba(255, 255, 255, 0);
        background-color: rgba(255, 255, 255, .95);
      }

      .q-checkbox__svg {
        color: var(--q-primary);
      }
    }


    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 19.5%;
      right: 11.4%;
      bottom: 55%;
      opacity: 0.48;
      clip-path: polygon(0 0, 2% 100%, 100% 0);
      background: linear-gradient(222deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.31) 100%);
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 9.35%;
      right: 12.3%;
      bottom: 0;
      opacity: 0.48;
      clip-path: polygon(0 100%, 100% 100%, 98% 0);
      background: linear-gradient(222deg, rgba(255, 255, 255, 0.31) 0%, rgba(255, 255, 255, 0) 100%);
    }
  }

  .q-table__grid-footer > :nth-child(n+1) {
    flex: 1 1 auto;
  }

  .q-grid-th, .q-grid-td {
    white-space: pre-wrap;
    @include text-select();
  }

  .q-table__grid-card-shade {
    z-index: 0;
    width: 45%;
    opacity: 0.28;
    max-width: 45%;
    max-height: 45%;
    aspect-ratio: 1 / 1;
    filter: blur(1.75rem);
    border-radius: 100% !important;
    background: linear-gradient(135deg, #3661FC 0%, #5961DF 100%);
  }
}

.q-table__grid-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(54, 97, 252, 0.2) 0%, rgba(89, 97, 223, 0.2) 100%);
}